<template>
  <div class="main-wrapper">
    <el-row :gutter="0" class="screen-row">
      <el-col :offset="0" :span="5" class="screen-header-nav">
        <ul class="navlist">
          <li
            v-for="line of navList"
            :key="line.id"
            class="navlist-item"
            :class="{ 'nvalist-item-active': line.category === activeCategory }"
            @mouseenter="
              handleMouseEnter(line.category);
              $event.stopPropagation();
            "
            @mouseleave="
              handleMouseLeave();
              $event.stopPropagation();
            "
          >
            <span>{{ line.name }}</span>
            <span class="nvalist-item-icon"
              ><el-icon><ArrowRightBold /></el-icon
            ></span>
            <div
              class="navlist-item-children"
              :style="{
                display: activeCategory === line.category ? 'block' : 'none',
              }"
            >
              <ul
                class="children-list"
                v-for="child of line.childrenList"
                :key="child.id"
              >
                <a
                  class="children-list-item"
                  v-for="item of child.goodList"
                  :key="item.id"
                  :href="'https://www.mi.com/shop/search?keyword=' + item.name"
                >
                  <li class="child-item">
                    <img
                      class="child-item-image"
                      :src="item.image"
                      loading="lazy"
                      alt=""
                    />
                    <span class="child-item-text"> {{ item.name }}</span>
                  </li>
                </a>
              </ul>
            </div>
          </li>
        </ul>
      </el-col>
      <el-col :offset="0" :span="19" class="screen-header-swiper">
        <Swiper :source="source" :height="'459px'" :from-page="'shop'" />
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  import { ref } from "vue";
  import Swiper from "./Swiper.vue";
  import { CarouselList } from "../../../types/Home";
  import { SideNavListType } from "../../../types/Shop";
  let timer: ReturnType<typeof setTimeout>;
  let activeCategory = ref<SideNavListType["category"]>("");

  const handleMouseEnter = (category: SideNavListType["category"]) => {
    clearInterval(timer);
    if (category) {
      activeCategory.value = category;
    }
  };

  const handleMouseLeave = () => {
    timer = setInterval(() => {
      activeCategory.value = "";
    }, 1000);
  };

  const source: Array<CarouselList> = [
    {
      id: 1,
      bigSource:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0937b3c33789f4a0bd2d707336d56dc.png?thumb=1&w=2452&h=920&f=webp&q=90",
      targetUrl: "/",
    },
    {
      id: 2,
      bigSource:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/34e1aad7b0ca76545b89ba588990e782.jpg?thumb=1&w=2452&h=920&f=webp&q=90",
      targetUrl: "/",
    },
    {
      id: 3,
      bigSource:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/45301ae059fd06c20db7fe339b390d54.jpg?thumb=1&w=2452&h=920&f=webp&q=90",
      targetUrl: "/",
    },
    {
      id: 4,
      bigSource:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/40fd255deee6afe3af8f1eb7f4e6fc39.jpg?thumb=1&w=2452&h=920&f=webp&q=90",
      targetUrl: "/",
    },
    {
      id: 5,
      bigSource:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ef1c0c8acd29afa03b6fa286f7bdc84f.jpg?thumb=1&w=2452&h=920&f=webp&q=90",
      targetUrl: "/",
    },
    {
      id: 6,
      bigSource:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28aec77fa645c4d78a5154963d025e00.jpg?w=2452&h=920",
      targetUrl: "/",
    },
    {
      id: 7,
      bigSource:
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3721414f3ec5d2c1e2a1dce5da0238a2.jpg?thumb=1&w=2452&h=920&f=webp&q=90",
      targetUrl: "/",
    },
  ];

  const navList: Array<SideNavListType> = [
    {
      id: 1,
      name: "手机",
      category: "phone",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "Xiaomi MIX系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bb9e4a367f854221b60bb7b3b05e0173.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "Xiaomi 数字旗舰",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4041dfcbaa3166d1c247f5dd2613a76b.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "Xiaomi Civi系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8baabd4fc4255a2cf81636335b4cf0c1.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Redmi K系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55b0ecc7cc8ab3714f311cc5df3bd0ae.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "Redmi Turbo系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e12d8f226458729f4c92063b09d4f0f2.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "Redmi Note系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a57303e8ac0d52a8b714a078cc35bfa1.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 1,
              name: "Redmi 数字系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c15a3d1b4e8bf2af17e6b5ad5559cfcb.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
      ],
    },
    {
      id: 2,
      name: "电视",
      category: "television",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "小米电视 S Pro Mini LED",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9130e19fd3d14426e6f21b933a6415bf.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "小米电视S Mini LED系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fb29bd1fdc24747f29a1391842e7249b.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "Redmi 智能电视 X 2025款",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d02613c3057fa79fd3aa46624eaa362.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Redmi 智能电视 A Pro系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/51f0324fcbf7ba74cba9b3f052a2c383.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "小米电视A竞技系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a4b477b5e44c1b9eb7d75c55f1c3f440.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "Redmi电视 A系列 2025",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/932b72abec0b476c741a85669009add9.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 1,
              name: "Redmi电视 MAX系列",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/30508961963af8937ead2013b77b97fe.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
      ],
    },
    {
      id: 3,
      name: "家电",
      category: "home appliances",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "壁挂空调",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/630b9e523bb2e1387ce6c7be1edaca18.png?thumb=1&w=80&h=80",
            },
            {
              id: 2,
              name: "立式空调",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/20e478a62b19d36ff05e92763fe7396f.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "中央空调",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/afcf69ccc6c889edb4ceeca205799d23.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "冰箱",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e6fe32cdaf14e104013384d89100f9c6.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "滚筒洗衣机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f23bac0cfa0082b79230350b87d27eea.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "波轮洗衣机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/fd480335781b6c6d6c0ba586c5bb209c.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 7,
              name: "除湿机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ce2cb16bdc44b5336c90e2d788d6c8e2.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 8,
              name: "洗地机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/00d73a63bf8fb50cb0cf071d903333b2.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 9,
              name: "电暖器",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/6aa1871d84aaae98cd676f5e2cf5c2f2.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 10,
              name: "净水器",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/12f4b26ced3716d07bfcc6beba751188.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 11,
              name: "微蒸烤",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f7dcbb8c268574041ce0b4b98e591cf1.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 12,
              name: "烟灶",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bf07e32a082098cc81a433fe360811c8.gif?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 3,
          goodList: [
            {
              id: 13,
              name: "洗碗机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/91ccbb3270bcfd72a3c3ae98f15aed9d.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 14,
              name: "扫地机器人",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d068f740ef433d49ba1304b0c70e39e3.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 15,
              name: "吸尘器",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/26deda5474eb7eb7e5b34547c58b9893.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 16,
              name: "加湿器",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3630f1d92e44f1518b982020986ee953.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 17,
              name: "空气净化器",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e997ed31cd5199ec0a24eeb48a37b1e7.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 18,
              name: "电饭煲",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/390e15818dd103b2f96f4ac742d47379.jpg?thumb=1&w=80&h=80",
            },
          ],
        },
        {
          id: 4,
          goodList: [
            {
              id: 19,
              name: "电磁炉",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d93e6a98403262a506c9e9b22293cdae.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 20,
              name: "水壶",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/39c8ccbebd08687bc6780373b7ef2a95.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 21,
              name: "落地风扇",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3a3e4238b70ef8db89ae77f8a3762fc8.png?thumb=1&w=80&h=80",
            },
            {
              id: 22,
              name: "投影仪",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c12fd1da9fed662842d6f5c57d7737c9.png?thumb=1&w=80&h=80",
            },
            {
              id: 23,
              name: "灯具",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/c0a6b523433a492dbf32035b2983d98e.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 24,
              name: "除螨仪",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4b611c8e68c0b9424e66857646c4b264.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
      ],
    },
    {
      id: 4,
      name: "笔记本 平板 显示器",
      category: "computer",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "Xiaomi Pad 7 Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/63710378af101deacce8b4986fdef250.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "Xiaomi Pad 7",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/194b27f9a5698e7f2d651f0c0635453a.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "Redmi A27U显示器",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/721960abfd3ba99426d74595124c0820.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Xiaomi 轻薄本",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/89a663c2e6c714754ec3d7d762edbe0c.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "Redmi 轻薄本",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cc502a8cdc637161c1dc813bd4e35b49.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "Redmi G游戏本",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cdb9f2fce41769ecf852fa84fd078c5c.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 1,
              name: "Xiaomi 平板",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/01093ece938a05e0e6e6b64299eb89ae.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "Redmi 平板",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/627ca9afd92d4efa4e29dce497c7bf8b.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "Redmi 显示器 G27",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a65a61d8b1c682eb18dd265652534f3.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Redmi 显示器 G34WQ",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2ac4fd34e03041586d6507444d0a24ca.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "Redmi 显示器 G Pro 27",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/722dcf898f2db1e5689a6df08e87b525.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "Redmi 显示器A27 IPS版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3d021135f38996f2de646b70103b91ba.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
      ],
    },
    {
      id: 5,
      name: "出行 穿戴",
      category: "wear",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "REDMI Watch 5",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6f3f4fad1bc8ef497b9023dffedbe338.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "Xiaomi Watch S4",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5f1a142b30ae28479510eab9b048580b.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "小米手环9 Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/20f93242663fc6d005deabc1252aca67.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Redmi 手环 3",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f017abd91eaeb1df17d9e2efec5cc5c.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "小米手环9",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dae737481038a58108f0f54e777a4eb1.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "小米手环9 NFC",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/98827e968b25c3391be7143daee2f9c6.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 1,
              name: "Xiaomi Watch S4Sport",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/879fbf4ec88f1c27835f7f895546fd27.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "小米手环8 Pro 原神定制版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b2db8cbb0eb80872b0a17b6ed28f3b04.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "Redmi Watch 4",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bcc439a3b36d1a845747a31afa49625d.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Xiaomi Watch S3",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/04d43426739f027486327c3b3bf5eaaf.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "小米手环 8 Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2f036af51af263aa6368718828e0d82e.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "Redmi 手环 2",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9571e91cffc2f1e5f9ea0d00d97b3b32.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 3,
          goodList: [
            {
              id: 1,
              name: "九号平衡车",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/50180b158690a40f9cbc684c7646d297.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 2,
              name: "九号平衡车 Plus",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/626b982c94f48ed1b259483adb90e4d6.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "九号平衡车燃动版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/54d0cbba1ae104949c0ab3c0dc3fb4f3.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "米家电动滑板车1S",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c9c97f78e2ffad07e7e16221785fed55.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "米家电动滑板车 3 青春版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/54fd3448445f5d7bf2fa6178ca09c90b.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "九号平衡车 改装套件",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2cf094ef537b34ed15028f7d50811e6e.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 4,
          goodList: [
            {
              id: 1,
              name: "九号卡丁车Pro兰博基尼汽车定制版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02944ae550c085526b0f4954d84f1de0.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "小米车载充电器快充版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/787c807176455f9ae40146af11e98b1e.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "小米车载充电器快充版1A1C 100W",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/46bbc5d5750f6af3f505c029ee6f1ba4.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "小米无线车充 Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/90cf14361fbe72fb8b063606d243610b.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "米家充气宝1S",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/ac25dffa570f0b12b6d52f968bfec3f6.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
      ],
    },
    {
      id: 6,
      name: "耳机 音响",
      category: "headset",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "REDMI Buds 6 Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4fa45caa44d39037cd57c189e6bb69f8.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "Redmi Buds 6	青春版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/dfd8124c484dc3fcc1186d39e27c7827.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "小米小爱音箱 Play",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/360215a1e32317abb912d48c3e80dd20.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Redmi Buds 6",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f56084f0a9adc67bd4866876b29a38c3.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "Xiaomi Buds 5",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c70bc9b94595d8a434a75e138fce7bca.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "Redmi Buds 6S",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b98ec4b01e8a36886e5830bb78a5555f.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 1,
              name: "Xiaomi 开放式耳机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b98ec4b01e8a36886e5830bb78a5555f.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "Redmi Buds 5 Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6d342fe78c4aca7e6458bd25ab15bdc9.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "Xiaomi Sound",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4086b6775c5194fff928ccd23d325acf.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Xiaomi智能家庭屏 10",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3080f7634a71b9863966ff0b10ad1a53.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "小爱音箱 Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/360215a1e32317abb912d48c3e80dd20.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "小爱音箱Play 增强版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/df7c5b83fa173824052ca7929dbb0c37.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 3,
          goodList: [
            {
              id: 1,
              name: "Xiaomi Sound Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/daeb40550103b72449ee783eabb45b0d.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "小米小爱触屏音箱Pro 8",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9177af7098efadcaac278e2f9c6f113a.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "Xiaomi 蓝牙音箱 Mini",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aa861ad93e69c69c7b2d1d21fd6946cd.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "小米小爱音箱 Play",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/3d5963e212402fa5ebd2e71dd10c426c.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 5,
              name: "蓝牙耳机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/007308d07c93d959c1ca8c8d62853914.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "Xiaomi智能家庭屏 6",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/15d918d05a777f119f4b794503ce5c98.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
        {
          id: 4,
          goodList: [
            {
              id: 1,
              name: "小米AI音箱",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/db89d422ef877cf7290616fef515e413.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 2,
              name: "小米蓝牙项圈耳机 青春版",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c9de25888336a62e24adec27eb185063.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "小米蓝牙耳机Line Free",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/25ee411a114cc72d08acbc18c7c1fccc.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Xiaomi 胶囊耳机 Pro",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d167b5121ccea162b8ea045d56d480a0.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "Xiaomi 胶囊耳机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/5232ef2eeeef67dee0fc7687b667b631.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
      ],
    },
    {
      id: 7,
      name: "健康 儿童",
      category: "health",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "小背包",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f26030d7d914b86daca51233a3ac5f9.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "双肩包",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/f628feba0f2f8253f9cc41f9984194a7.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 3,
              name: "胸包",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/2846c64ffd97969c639979da9bb97974.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "旅行箱",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c5138635ef1396e35856ec942e3b6c0.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "收纳袋",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/77aa97808ebf4965cf823fd2199433ec.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "运动鞋",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e899d08e36c306570d4fe3c75df90a42.jpg?thumb=1&w=80&h=80",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 7,
              name: "服饰",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c6b6895044b55858102f72d87a6c39f.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 8,
              name: "眼镜",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d521bd58668f66c50562b8fa8949f67c.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 9,
              name: "床垫",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/aba45662667dceaf4ba0e5b08f44d3a7.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 10,
              name: "枕头",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/744306b95df4d130bdfc346ff2b3c871.png?thumb=1&w=80&h=80",
            },
            {
              id: 11,
              name: "螺丝刀",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/458169c8138413666feb860068ce1a56.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 12,
              name: "保温杯",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/813d173eff50a83abb8abd5abde5f5a6.jpg?thumb=1&w=80&h=80",
            },
          ],
        },
      ],
    },
    {
      id: 8,
      name: "生活 箱包",
      category: "life",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "洗手机",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/da43c3dd6b171ee267f1fd1ec01b9208.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 2,
              name: "剃须刀",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/60d7bdf307ceaba08b3275246ad3ab53.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 3,
              name: "修剪器",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/96b5d738ce5926e3a6969ad68fa1521d.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "牙刷",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/15447769c461fdc71e84a7badb83f09b.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 5,
              name: "吹风机",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bba7ce79f4d61939c69b7a26bf507bae.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 6,
              name: "体重秤",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/459afd0eb2a3bc6313e7ac62bd3a52df.png?thumb=1&w=80&h=80",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 7,
              name: "体脂秤",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fe6166ca2026008abb86bc67dfd8211d.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 8,
              name: "米家跑步机",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9e04107f99edded4a64b7e92ae25641d.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 9,
              name: "米家动感单车",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/84ca0dbb3d7b8debc2e531109d7c2b58.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 10,
              name: "走步机",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/fb1fee7e2f2963baae34d3611a2b7e9f.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 11,
              name: "益智积木",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d9d211ae20e700690ce9eec644ac3f31.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 12,
              name: "儿童手表",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/a0b3a592784632760a7ef25de50147a7.jpg?thumb=1&w=80&h=80",
            },
          ],
        },
        {
          id: 3,
          goodList: [
            {
              id: 13,
              name: "服饰",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6c6b6895044b55858102f72d87a6c39f.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 14,
              name: "眼镜",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/d521bd58668f66c50562b8fa8949f67c.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 15,
              name: "床垫",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/aba45662667dceaf4ba0e5b08f44d3a7.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 16,
              name: "枕头",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/744306b95df4d130bdfc346ff2b3c871.png?thumb=1&w=80&h=80",
            },
            {
              id: 17,
              name: "螺丝刀",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/458169c8138413666feb860068ce1a56.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 18,
              name: "水杯",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/813d173eff50a83abb8abd5abde5f5a6.jpg?thumb=1&w=80&h=80",
            },
          ],
        },
      ],
    },
    {
      id: 9,
      name: "智能 路由器",
      category: "intelligence",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "MIJIA K歌麦克风",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/435f8b56d41de210d1c4598f4f00fa50.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "打印机",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5ef6c2d63df78e140afab6ac3c088fac.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 3,
              name: "小米路由器",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4670a965ac5f0dd32689e06c27cea78f.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 4,
              name: "Redmi路由器",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/399b717a9d27252f21e32a981403c1c0.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "智能家庭",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/aa7c5302bf6c8e040b084dee50fa699f.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "对讲机",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/21fedf7ba9019bce59cbc4856f907076.jpg?thumb=1&w=80&h=80",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 7,
              name: "摄像机",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/067f4a6f0ffb264ed40734a97deae52d.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 8,
              name: "门铃/猫眼",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/4fb7885d49255b93f7245aa53501294c.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 9,
              name: "小爱音箱",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/286f1b9527d8df27c43ca28fcf71f062.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 10,
              name: "家庭屏",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7242436b36197a81d73b67ce6a5f26f5.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
          ],
        },
      ],
    },
    {
      id: 10,
      name: "电源 配件",
      category: "charge",
      childrenList: [
        {
          id: 1,
          goodList: [
            {
              id: 1,
              name: "插座插排",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/458adc268050c17312da7c12328395e8.jpg?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 2,
              name: "移动电源",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8c55361386a46857f962e5142baeefcf.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 3,
              name: "数据线",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/45dd7a2c4fc3d17d5d261ed3eed7cd15.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 4,
              name: "平板配件",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/49f1917ed50c197e7b27407a10256fa3.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "充电器",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/864bcd18999a7b0fe22365f7ea7909e0.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 6,
              name: "电池",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/10ec831749f1c657fc0a494feab15ed4.jpg?thumb=1&w=80&h=80",
            },
          ],
        },
        {
          id: 2,
          goodList: [
            {
              id: 1,
              name: "自拍杆",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/2725e04c955dc060ac142fabbf809c1e.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 2,
              name: "手机壳",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/5c6e60e48edf17219724faad95963b93.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 3,
              name: "手机贴膜",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/e9e248c899fd895c9267f494ea1aaebf.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 4,
              name: "无线充电器",
              image:
                "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/27074367aa02371a3c3c417c41195346.png?thumb=1&w=80&h=80&f=webp&q=90",
            },
            {
              id: 5,
              name: "黑鲨配件",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/9c3ead590f49767a4f562b7285215f5e.jpg?thumb=1&w=80&h=80",
            },
            {
              id: 6,
              name: "其他配件",
              image:
                "https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/57d9989807dbc15c1a82bc49acc1f06f.jpg?thumb=1&w=80&h=80",
            },
          ],
        },
      ],
    },
  ];
</script>

<style lang="scss" scoped>
  @use "@/styles/variable" as *;
  @use "@/styles/mixin.scss" as *;

  .main-wrapper {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    min-height: 460px;
    box-sizing: border-box;
  }

  .screen-header-nav {
    min-width: 233px;
    height: 100%;
    border: 0;
    color: $bsWhite;
    background: $text-secondary-3;

    .navlist {
      width: 100%;
      height: 460px;
      box-sizing: border-box;
      padding: 20px 0px;
    }

    .navlist-item {
      width: 100%;
      height: 42px;
      line-height: 42px;
      cursor: pointer;
      padding: 10px 30px;
      list-style: none;
      font: $bsFont;
    }

    .nvalist-item-active {
      background: $themeColor;
    }

    .nvalist-item-icon {
      float: right;
      font-size: 14px;
    }

    .navlist-item-children {
      top: 0;
      left: 255px;
      position: absolute;
      width: auto;
      height: 459px;
      z-index: 1000;
      background: $bsWhite;
      border-left: 0;
      display: none;
      box-shadow: 10px 10px 15px 0px $text-secondary-3;
    }

    .children-list {
      float: left;
      height: 460px;
    }

    .children-list-item {
      text-decoration: none;
      list-style: none;
    }

    .child-item {
      min-height: 45px;
      line-height: 45px;
      cursor: pointer;
      padding: 16px 9px;
      box-sizing: border-box;
    }

    .child-item-image {
      width: 40px;
      aspect-ratio: auto 40 / 40;
      height: 40px;
      margin-right: 12px;
      vertical-align: middle;
    }

    .child-item-text {
      float: right;
      width: 172px;
      line-height: 40px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      color: $bsGray;
    }

    .child-item-text:hover {
      color: $themeColor;
    }
  }

  .screen-header-swiper {
    height: 460px;
    box-sizing: border-box;
  }

  @include clearfix;
</style>
